<script setup lang="ts">
import { ref, onMounted } from "vue";
import ReCol from "@/components/ReCol";
/** 表单字段 */
import { FormProps } from "../utils/types";

/** 表单字段初始化 */
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    title: "收货信息",
    recipientsaddr: "",
    recipientsname: "",
    recipientsphone: "",
    note: ""
  })
});
const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<!-- ✨该表单实现了 修改和新增 两种状态表单公用 -->
<!-- 默认状态为 修改表单 -->
<!-- 仅在 newFormInline.title 的值为 新增时，显示新增表单 -->
<template>
  <el-form ref="ruleFormRef" :model="newFormInline" label-width="82px">
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="收货人" prop="recipientsname">
          <el-input
            v-model="newFormInline.recipientsname"
            clearable
            placeholder="请输入收货人"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="手机号码" prop="recipientsphone">
          <el-input
            v-model="newFormInline.recipientsphone"
            clearable
            placeholder="请输入手机号码"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="收货地址" prop="recipientsaddr">
          <el-input
            v-model="newFormInline.recipientsaddr"
            clearable
            placeholder="请输入收货地址"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="备注" prop="note">
          <el-input
            v-model="newFormInline.note"
            clearable
            placeholder="请输入备注"
          />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>
